<template>
    <div class="main">
        <van-row gutter="10" class="row">
            <van-col span="4">
                <van-image
                    width="66"
                    height="66"
                    src="http://scrm-mochat.oss-cn-beijing.aliyuncs.com/mochat/employee/thumb_avatar16254622975590835805.png?Expires=1627038281&OSSAccessKeyId=LTAI5tL1jwaCjV6k3sjuAJBf&Signature=u3r105VqbPkx2x35mBaDV6WAG2c%3D"></van-image>
            </van-col>
            <van-col span="20">
                <van-cell center title="张三 陕师大 2022考研"  is-link>
                    <template #label>
                        <span style="margin-right: 3px">13991398824</span><van-tag type="primary">重要</van-tag>
                    </template>
                </van-cell>
            </van-col>
        </van-row>
        <van-row class="row">
            <span class="label">来源</span>
            <span class="van-ellipsis">通过渠道码 陕师大22考研复试规划宣传群添加</span>
        </van-row>
        <van-row class="row">
            <van-col span="12">
                <span class="label">添加时间</span>
                <span>2020/9/11</span>
            </van-col>
            <van-col span="12">
                <span class="label">考研年份</span>
                <span>2022</span>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="16">
                <van-cell title="Ta添加的" is-link>
                    <template #value>
                        <van-image
                            round
                            width="0.5rem"
                            height="0.5rem"
                            style="vertical-align: middle;"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                        <van-image
                            round
                            width="0.5rem"
                            height="0.5rem"
                            style="vertical-align: middle;"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                        <span>等2人</span>
                    </template>
                </van-cell>
            </van-col>
            <van-col span="8">
                <van-cell value="共1个群" is-link></van-cell>
            </van-col>
        </van-row>
        <van-grid :column-num="3" direction="horizontal" >
            <van-grid-item icon="photo-o" text="客户评分" />
            <van-grid-item icon="photo-o" text="客户积分" />
            <van-grid-item icon="photo-o" text="跟进状态" />
        </van-grid>
        <van-cell title="企业标签" is-link value="添加"/>
        <van-row class="sub-row">
            <span style="margin-right: 6px">客户等级</span>
            <van-tag type="primary">重要</van-tag>
        </van-row>
        <van-row style="margin-left: 20px;">
            <span style="margin-right: 6px">6.18活动</span>
            <van-tag type="primary">重要</van-tag>
        </van-row>
        <van-cell title="个人标签" is-link value="添加"/>
        <van-row class="sub-row">
            <van-tag type="primary">标签</van-tag>
        </van-row>
        <van-cell title="朋友圈互动" is-link value="更新于23小时前">
            <template #right-icon>
                <van-icon name="replay" class="search-icon" />
            </template>
        </van-cell>
        <van-row gutter="10" class="sub-row">
            <van-col span="8">
                <span>点赞次数</span>0
            </van-col>
            <van-col span="8">
                <span>评论次数</span>0
            </van-col>
            <van-col span="8">
                <span>浏览次数</span>0
            </van-col>
        </van-row>
        <van-divider />
<!--        <van-tabs>-->
<!--            <van-tab title="动态">-->
<!--                <van-steps direction="vertical" :active="0">-->
<!--                    <van-step>-->
<!--                        <h3>加入群聊</h3>-->
<!--                        <p>2016-07-12 12:40</p>-->
<!--                    </van-step>-->
<!--                    <van-step>-->
<!--                        <h3>添加好友</h3>-->
<!--                        <p>2016-07-11 10:00</p>-->
<!--                    </van-step>-->
<!--                    <van-step>-->
<!--                        <h3>添加标签</h3>-->
<!--                        <p>2016-07-10 09:30</p>-->
<!--                    </van-step>-->
<!--                    <van-step>-->
<!--                        <h3>添加标签</h3>-->
<!--                        <p>2016-07-10 09:30</p>-->
<!--                    </van-step>-->
<!--                </van-steps>-->
<!--            </van-tab>-->
<!--            <van-tab title="我的店铺">内容 2</van-tab>-->
<!--        </van-tabs>-->
        <van-tabbar>
            <van-tabbar-item icon="home-o">添加待办</van-tabbar-item>
            <van-tabbar-item icon="search">添加跟进</van-tabbar-item>
            <van-tabbar-item icon="friends-o">转接客户</van-tabbar-item>
            <van-tabbar-item icon="setting-o">模板拉群</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data(){
        return {
            rate:0,
            rateOptions:[
                {text:'全部商品',value:0},
                {text:"全部商品新款商品",value:1},
                {text:'活动商品',value:2},
            ],
        }

    }
}
</script>
<style lang="less" scoped>
.main{
    margin: 4px;
    font-size: small;
    background-color: #fff;
}
.title{
    width: fit-content;
}
.van-cell__value {
    min-width: 70%;
    text-align: left;
    color: #e6210c;
    font-weight: bold;
    font-size: 1rem;
    overflow: hidden;
    line-height: 3.0625rem;
    flex: 1;
    position: relative;
    vertical-align: middle;
}
.search-icon {
    font-size: 16px;
    line-height: inherit;
}
.custom-title {
    color: #1ab394;
    margin-left: 5px;
    margin-right: 4px;
    vertical-align: middle;
    line-height: 0.1rem;
}
.cell-line{
    line-height: 0.3rem;
}
.ta-added{
    color: #1989FA;
    line-height: 0.2rem;
    .van-cell__title{
        min-width: 80%;
    }
    .van-cell__value {
        text-align: left;
        color: #e6210c;
        font-weight: bold;
        font-size: 1rem;
        overflow: hidden;
        line-height: 3.0625rem;
        flex: 1;
        position: relative;
        vertical-align: middle;
    }
}
.source{
    line-height: 0.5rem;
    .van-cell__value {
        min-width: 70%;
        span {
            display: inline-block;
            text-align: left;
            word-break: break-all;
        }
    }
}
.row{
    margin: 5px 0px 3px 16px;
}
.sub-row{
    margin: 5px 0px 3px 20px;
}
.label{
    margin: 0px 3px 0px 0px
}

</style>
